<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
  width: 100%; height: 100%; margin: 0px; padding: 0px
}
div.particles {
  width: 100%; height: 100%
}
</style>
<script type="text/javascript" src="../../../vendor/particles/particles.min.js"></script>
</head>
<body spellcheck="false">
<div id="particles" class="particles" data-color="#ffffff" data-line-color="#ffffff"></div>
<script type="text/javascript">
document.getElementById('particles').addEventListener('run', function(){
  particlesJS('particles', {
    'particles': {
      'number': {
        'value': 80,
        'density': {
          'enable': true,
          'value_area': 800,
        },
      },
      'color': {
        'value': this.dataset.color,
      },
      'opacity': {
        'value': 0.5,
        'random': false,
        'anim': {
          'enable': false,
          'speed': 1,
          'opacity_min': 0.1,
          'sync': false,
        },
      },
      'size': {
        'value': 5,
        'random': true,
        'anim': {
          'enable': false,
          'speed': 40,
          'size_min': 0.1,
          'sync': false,
        },
      },
      'line_linked': {
        'enable': true,
        'distance': 150,
        'color': this.dataset.lineColor,
        'opacity': 1,
        'width': 1,
      },
      'move': {
        'enable': true,
        'speed': 6,
        'direction': 'none',
        'random': false,
        'straight': false,
        'out_mode': 'out',
        'attract': {
          'enable': false,
          'rotateX': 600,
          'rotateY': 1200,
        },
      },
    },
    'interactivity': {
      'detect_on': 'canvas',
      'events': {
        'onhover': {
          'enable': true,
          'mode': 'repulse',
        },
        'onclick': {
          'enable': false,
          'mode': 'push',
        },
        'resize': true,
      },
      'modes': {
        'grab': {
          'distance': 400,
          'line_linked': {
            'opacity': 1,
          },
        },
        'bubble': {
          'distance': 400,
          'size': 40,
          'duration': 2,
          'opacity': 8,
          'speed': 3,
        },
        'repulse': {
          'distance': 50,
        },
        'push': {
          'particles_nb': 4,
        },
        'remove': {
          'particles_nb': 2,
        },
      },
    },
    'retina_detect': true,
  });
});
</script>
</body>
</html>